<template>
  <div class="trends-list">
    <div class="banner flex-center">
      <div class="title-t">
        {{ pageTitle }}
        <div class="title-b">{{ enTitle }}</div>
      </div>
    </div>
    <div class="nav">
      <div class="nav-list main-wrapper">
        <div v-for="(typeItem, typeIndex) in typeList" :key="typeIndex" @click="tabChange(typeItem)"
          :class="['nav-item', 'flex-center', typeRadio == typeItem.value ? 'active' : '']">{{ typeItem.label }}</div>
      </div>
    </div>
    <div v-loading="listLoding" class="list main-wrapper">
      <div @click="toTrends(trendsItem)" v-for="(trendsItem, trendsIndex) in trendsList" :key="trendsIndex"
        class="trends-item">
        <div class="trends-img">
          <el-image style="width: 100%;height: 100%;" :src="getImageUrl(trendsItem.newsPicture)" fit="cover">
            <template #error>
              <img src="/images/course_default.png" style="width: 100%; height: 100%;">
            </template>
          </el-image>
        </div>
        <div class="trends-r">
          <div class="item-title otw-2">{{ trendsItem.name }}</div>
          <div class="trends-content otw-4">{{ extractText(trendsItem.content) }}</div>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination :total="pager.total" v-model:current-page="pager.pageIndex" :page-size="pager.pageSize"
        @current-change="getTrendsList" prev-text="上一页" next-text="下一页" layout="prev, pager, next" background />
    </div>
  </div>
</template>
<script>
export default {
  name: 'TrendsList'
}
</script>
<script setup>
import { useSystemStore } from '@/stores/modules/system.js';
import { reactive, ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { http } from '@/utils/http/index.js'
import { getImageUrl, extractText } from '@/utils/index.js'
// import moment from '@/plugins/moment.js'
const router = useRouter()
const route = useRoute()

// /api
const systemStore = useSystemStore()
/**设置头部 */
systemStore.headerType = ''
systemStore.headerBgcolor = 'normal'
systemStore.headerFontColor = '0'

const typeRadio = ref(route.query.type ?? 'theory')
const typeList = ref([
  { label: '理论学习', value: 'theory' },
  { label: '宣讲动态', value: 'publicize' },
])
const pageTitle = computed(() => {
  const find = typeList.value.find(el => el.value == typeRadio.value)
  if (find) return find.label
  return ''
})
const enTitle = computed(() => {
  if (typeRadio.value == 'theory') return 'Theoretical learning'
  if (typeRadio.value == 'publicize') return 'Publicize trends'
  return ''
})
const tabChange = (tab) => {
  pager.pageIndex = 1
  router.push('/trends-list?type=' + tab.value)
  typeRadio.value = tab.value
  getTrendsList()
}

const url = {
  theory: '/TheoryStudy/GetTheoryStudyNewsList',
  publicize: '/Preach/GetPreachNewList',
}

const trendsList = ref([])
const pager = reactive({
  pageIndex: 1,
  pageSize: 5,
  total: 0
})
const listLoding = ref(false)
const getTrendsList = () => {
  listLoding.value = true
  http.$POST(url[typeRadio.value], { pageIndex: pager.pageIndex, pageSize: pager.pageSize }).then(res => {
    if (res.isError) return
    pager.total = res.result.countAll
    trendsList.value = res.result.dataLst
  }).finally(() => listLoding.value = false)
}

/**去动态详情页 */
const toTrends = (item) => {
  window.open(`/trends-list/trends-details?type=${typeRadio.value}&id=${item.id}`)
}

getTrendsList()

</script>
<style lang='scss' scoped>
.trends-list {
  width: 100%;

  .banner {
    width: 100%;
    height: 303px;
    background-image: url(@/assets/images/front/trends_banner_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 42px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 23px;

    .title-t {
      text-align: center;

      .title-b {
        margin-top: 21px;
        font-size: 14px;
      }
    }
  }

  .nav {
    border-bottom: 1px solid #E7E7E7E7;

    .nav-list {
      padding-left: 86px;
      display: flex;

      .nav-item {
        cursor: pointer;
        width: 139px;
        height: 54px;
        font-size: 14px;
        font-weight: normal;
        color: #666666;

        &.active {
          color: #fff;
          background-color: var(--theme-color);
        }
      }
    }
  }

  .list {
    margin-top: 17px;
    padding-bottom: 49px;
    min-height: 600px;

    .trends-item {
      cursor: pointer;
      height: 300px;
      display: flex;
      padding-top: 27px;
      padding-bottom: 50px;
      border-bottom: 1px solid #E7E7E7E7;
      gap: 74px;

      .trends-img {
        width: 453px;
        height: 100%;
      }

      .trends-r {
        flex: 1;
        width: 0;
        height: 100%;
        font-size: 18px;
        font-weight: 400;
        color: #999899;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .item-title {
          font-size: 26px;
          font-weight: bold;
          color: #393939;
        }

        &:hover {
          .item-title {
            color: var(--theme-color);
          }
        }
      }
    }
  }

  .pagination {
    margin: 60px 0 52px;

    :deep(.el-pagination) {
      justify-content: center;
    }
  }
}
</style>